.container {
  padding-bottom: 40px;
}

.figure *, .interactive * {
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform: translate3d(0, 0, 0); -webkit-transform: translate3d(0, 0, 0);
}

#wrap {
    min-width: 890px;
}

.interactive {
    -webkit-font-smoothing: antialiased;
    background: #383d4c;
    color:#fff;
    padding:50px 10px;
    box-shadow: inset 0 0 250px rgba(0, 0, 0, .6);
    margin-bottom:10px;
}
.interactive p {
    text-align: center;
}


/* DOOR STUFF */
.doorwrap {
    width:630px;
    margin:32px auto;
    position: relative;
}
.figure {
    float:left;
    padding:20px;
    background: #e8e8e9;
    margin-right:10px;
    text-align: center;
    font-size:0.83333333333em;
    line-height: 1.466667em;
}
.figure:last-child {
    margin-right:0;
}
.probabilityWrap {
    margin:0 auto 32px;
    width:950px;
}
.figure-wrap {
    width:430px;
}
.figure h3 {
    margin:.5em 0;
}
.figure p {
    margin:0;
}
.med-doors {
    width:415px;
    position: relative;
}
.small-doors {
    width:296px;
    height:296px;
    border:2px solid #21252b;
    background:#21252b;
    border-radius: 300px;
    text-align: center;
    position: relative;
    float:left;
    margin-right:15px;
    transition:all .4s; -webkit-transition:all .4s;
    opacity: 1;
}
.small-doors.yellow-border {
    border-color:#EEC913;
}
.small-doors:last-child {
    margin-right:0;
}
.small-doors.hidden {
    opacity:0;
}
.small-doorwrap {
    position: absolute;
    top:90px;
    left:0;
    width:300px;
}
.door-options {
    width:940px;
    margin:0 auto;
}
.door-outer {
    width:180px;
    height:300px;
    display:inline-block;
    position:relative;
    margin-right:35px;
    perspective: 1300px; -webkit-perspective: 1300px; -moz-perspective: 1300px; -ms-perspective: 1300px;
    perspective-origin: 50% 50%; -webkit-perspective-origin: 50% 50%; -moz-perspective-origin: 50% 50%; -ms-perspective-origin: 50% 50%;
}
.med-doors .door-outer {
    width:130px;
    height:220px;
    margin-right:8px;
}
.small-doors .door-outer {
    width:70px;
    height:120px;
    margin-right:1px;
}
.door-frame {
    background: #89b23f;
    width:180px;
    height:300px;
    box-shadow:1px 1px 5px rgba(0, 0, 0, .5);
    position:relative;
    transition:all .3s; -webkit-transition:all .3s;
    perspective: 1300px;  -webkit-perspective: 1300px; -ms-perspective: 1300px; -moz-perspective: 1300px;
}
.med-doors .door-frame {
    width:130px;
    height:220px;
}
.small-doors .door-frame {
    width:70px;
    height:120px;
}
.door-outer:last-child {
    margin-right:0;
}
.door-frame.lift {
    cursor:pointer;
    -webkit-backface-visibility: hidden;
    -webkit-transform:translate3d(0, 0, 0);
}
.door-frame.lift, .selected .door-frame {
    transform: translateZ(40px); -webkit-transform: translateZ(40px); -ms-transform: translateZ(40px);
    box-shadow:11px 11px 7px rgba(0, 0, 0, .2);

}
.small-doors .selected .door-frame {
    box-shadow:4px 4px 7px rgba(0, 0, 0, .2);
}
.door-inside {
    background: #566631;
    width:150px;
    height: 285px;
    position: absolute;
    left:15px;
    bottom:0;
    overflow:hidden;
}
.med-doors .door-inside {
    width:110px;
    height:210px;
    left:10px;
}
.small-doors .door-inside {
    width:56px;
    height:113px;
    left:7px;
}
.door-inside:after {
    content:"";
    display:block;
    background:#495726;
    width:200px;
    height:100px;
    position:absolute;
    transform: rotate(28deg); -webkit-transform: rotate(28deg); -ms-transform: rotate(28deg);
    top:-38px;
}
.med-doors .door-inside:after {
    width:146px;
    height:73px;
    top:-29px;
}
.small-doors .door-inside:after {
    width:136px;
    height:65px;
    top:-20px;
}
.door {
    width:152px;
    height: 286px;
    position: absolute;
    left:14px;
    bottom:0;
    z-index:2;
    background: #9fcc52;
    transition: all .5s; -webkit-transition: all .5s;
    transform-origin: right center; -webkit-transform-origin: right center; -ms-transform-origin: right center;
    transform-style: preserve-3d; -webkit-transform-style: preserve-3d; -ms-transform-style: preserve-3d;
    transform: rotateY(0deg); -webkit-transform: rotateY(0deg); -ms-transform: rotateY(0deg);
    backface-visibility: visible; -webkit-backface-visibility: visible;

}
.med-doors .door {
    z-index: 1;
}
.door.trans {
    opacity: .6;
}
.med-doors .door {
    width:112px;
    height:211px;
    left:9px;
}
.small-doors .door {
    width:58px;
    height:114px;
    left:6px;
}
.door:after {
    content:"";
    display:block;
    width:16px;
    height:16px;
    border-radius:8px;
    position: absolute;
    left:16px;
    top:135px;
    background: #fff;
}
.med-doors .door:after {
    width:12px;
    height:12px;
    top:100px;
    left:10px;
}
.small-doors .door:after {
    width:8px;
    height:8px;
    top:55px;
    left:6px;
}
.door.open{
    transform: rotateY(98deg); -webkit-transform: rotateY(98deg); -ms-transform: rotateY(98deg);
}
.yellow .door-frame {
    background: #EEC913;
}
.yellow .door {
    background: #FFE35C;
}
.yellow .door-inside {
    background: #6D5C08;
}
.yellow .door-inside:after {
    background: #584A07;
}

.small-prize {
    display: block;
    position: absolute;
    z-index: 1;
    width: 48px;
    left: 12px;
    top: 37px;
}

/* probability dots */
.probability-dots {
    position:relative;
    width:415px;
    height:50px;
    z-index:1;
}
.dot {
    width:50px;
    height:50px;
    font-weight: bold;
    position: absolute;
    z-index:1;
}
.dot-inner {
    background: #f3d62a;
    border-radius: 40px;
    width:50px;
    height:50px;
    box-shadow: 2px 2px 6px rgba(0, 0, 0, .15);
    position: absolute;
    left:0;
    top:0;
    z-index: 3;
}
.dot-upDown, .dot-leftRight {
    position: absolute;
    left:0;
    top:0;
    width:50px;
    height: 50px;
}
.dot p {
    position:absolute;
    margin:0;
    top:10px;
    left:0;
    width:50px;
    text-align: center;
    font-size:14px;
    line-height: 1.25;
}
.dot span {
    display:block;
}
.numerator {
    position:absolute;
    top:-2px;
    left:0;
    width:50px;
}
.bar {
    position:absolute;
    height: 0;
    width:20px;
    left:15px;
    top:14px;
    overflow: hidden;
    border-top:2px solid #222;
}
.denominator {
    position:absolute;
    top:16px;
    left:0;
    width:50px;
}
.dot1 {
    left:9.6%;
    bottom:-25px;
}
.dot2 {
    left:44%;
    bottom:-25px;
    z-index:5;
}
.dot3 {
    left:78%;
    bottom:-25px;
}
.dotGrow {
    z-index:10;
}
.topsplit {
    z-index: 6;
}
.splitDot {
    z-index:5;
}
.splitDot .dot-inner {
    z-index: 2;
}
/* probability figure animations */
.dotMove .dot-inner, .splitDot .dot-inner, .dotMove p, .dot-upDown, .dot-leftRight,
.animate-door, .dot-inner, .dotGrow p, .dotGrowLarger p, .numberFirst, .numberSecond {
    animation-iteration-count: infinite; -webkit-animation-iteration-count: infinite;
    animation-direction: alternate; -webkit-animation-direction: alternate;
    animation-duration:2s; -webkit-animation-duration:2s;
    animation-timing-function: linear; -webkit-animation-timing-function: linear;
}

.dotMove .dot-inner {
    animation-timing-function: ease-in; -webkit-animation-timing-function: ease-in;
    animation-name: scaleDisappear; -webkit-animation-name: scaleDisappear;
}
.splitDot .dot-inner {
    animation-timing-function: ease-in; -webkit-animation-timing-function: ease-in;
    animation-name: scaleDisappear; -webkit-animation-name: scaleDisappear;
}

.dotMove p {
    animation-timing-function: ease; -webkit-animation-timing-function: ease;
    animation-name: textDisappear; -webkit-animation-name: textDisappear;
}
.dot-upDown {
    animation-name: upDown; -webkit-animation-name: upDown;
}
.dot-leftRight {
    animation-timing-function: cubic-bezier(0.5, 0.000, 0.5, 1); -webkit-animation-timing-function: cubic-bezier(0.5, 0.000, 0.5, 1);
    animation-name: leftRightOneDoor; -webkit-animation-name: leftRightOneDoor;
}
.splitDot .dot-leftRight {
    animation-name: leftRightTwoDoors; -webkit-animation-name: leftRightTwoDoors;
}
.animate-door {
    animation-timing-function: ease; -webkit-animation-timing-function: ease;
    animation-name: doorOpenClose; -webkit-animation-name: doorOpenClose;
}
.dotGrow .dot-inner {
    animation-name: dotGrow; -webkit-animation-name: dotGrow;
}
.dotGrowLarger .dot-inner {
    animation-name: dotGrowLarger; -webkit-animation-name: dotGrowLarger;
}
.numberFirst {
    animation-name: numFirst; -webkit-animation-name: numFirst;
}
.numberSecond {
    animation-name: numSecond; -webkit-animation-name: numSecond;
}


.selection {
    position:absolute;
    width:208px;
    height:335px;
    overflow:hidden;
    margin:0; padding:0;
    z-index:100;
    left:-10px;
    top:-10px;
}

/* border-runner rules for javascript elements */
.med-select {
    width:132px;
    height:222px;
    position:absolute;
    left:-1px;
    top:-1px;
    transition: all .3s; -webkit-transition: all .3s;
    z-index:100;
}
.small-select {
    width:72px;
    height:122px;
    position:absolute;
    left:-1px;
    top:-1px;
    transition: all .3s; -webkit-transition: all .3s;
    z-index:100;
}
.largeSelect{
    width:200px;
    height:320px;
    position:absolute;
    left:-10px;
    top:-10px;
    transition: all .3s; -webkit-transition: all .3s;
}
.largeSelect.hidden, .small-select.hidden, .select.hidden {
    transform: scale(.95, .95); -webkit-transform: scale(.95, .95); -ms-transform: scale(.95, .95);
    opacity:0;
}
.runner-inner {
    width:100%;
    height:100%;
    position: relative;
}
.running-border{
    position: absolute;
    overflow: hidden;


}
.running-border-wrap {
    position: absolute;
    animation-iteration-count: infinite; -webkit-animation-iteration-count: infinite;
    animation-timing-function: linear; -webkit-animation-timing-function: linear;
}

.top-runner {
    top:0;
    left:1px;
}
.bottom-runner {
    bottom:0;
    right:1px;
}
.right-runner {
    right:0;
    bottom:1px;
}
.left-runner {
    left:0;
    bottom:1px;
}

.top-runner-wrap {
    top:0;
    left:0;
    animation-duration:1s; -webkit-animation-duration:1s;
    animation-name: borderTopMove; -webkit-animation-name: borderTopMove;
}
.bottom-runner-wrap {
    bottom:0;
    left:0;
    animation-duration:1s; -webkit-animation-duration:1s;
    animation-name: borderBottomMove; -webkit-animation-name: borderBottomMove;
}
.right-runner-wrap {
    right:0;
    top:0;
    animation-duration:1s; -webkit-animation-duration:1s;
    animation-name: borderRightMove; -webkit-animation-name: borderRightMove;
}
.left-runner-wrap {
    left:0;
    top:0;
    animation-duration:1s; -webkit-animation-duration:1s;
    animation-name: borderLeftMove; -webkit-animation-name: borderLeftMove;
}
.segment{
    position:absolute;
    -webkit-backface-visibility:hidden;
}
.segment.horizontal {
    top:0;
}
.segment.vertical {
    left:0;
}



@keyframes borderTopMove {
    from { transform:translateX(-20px);}
    to { transform:translateX(0);}
}
@keyframes borderBottomMove {
    from { transform:translateX(10px);}
    to { transform:translateX(-10px);}
}
@keyframes borderLeftMove {
    from { transform:translateY(10px);}
    to { transform:translateY(-10px);}
}
@keyframes borderRightMove {
    from { transform:translateY(-20px);}
    to { transform:translateY(0px);}
}

@-webkit-keyframes borderTopMove {
    from { -webkit-transform:translateX(-20px);}
    to { -webkit-transform:translateX(0); }
}
@-webkit-keyframes borderBottomMove {
    from { -webkit-transform:translateX(10px);}
    to {  -webkit-transform:translateX(-10px); }
}
@-webkit-keyframes borderLeftMove {
    from { -webkit-transform:translateY(10px); }
    to { -webkit-transform:translateY(-10px); }
}
@-webkit-keyframes borderRightMove {
    from { -webkit-transform:translateY(-20px); }
    to { -webkit-transform:translateY(0px); }
}

#int1-instructions {
    min-height:80px;
}
#int1-step1 {padding-top:15px;}
#int1-step2 {}
.intstruction-area {
    width:800px;
    position: relative;
    margin:0 auto;
}
.interactive-wrap p {
    font-size: 0.888888889em;
}
.transition {
    transition:all .4s;
}
p.instruction, .answers p {
    font-size:1em;
    font-weight:bold;
    margin-bottom:0;
    position:absolute;
    top:0;
    width:800px;
    max-width: none;
    transition:all .4s; -webkit-transition:all .4s;
    transform: translateY(0); -webkit-transform: translateY(0);

}
.instruction.past, .answers p.past {
    transform: translateY(-20px); -webkit-transform: translateY(-20px);
    opacity: 0;
}
.instruction.prep, .answers p.prep {
    opacity: 0;
    transform: translateY(40px); -webkit-transform: translateY(40px);
}

#int2-instructions .instruction {
    transform: translateY(25px); -webkit-transform: translateY(25px);
}
#int2-instructions .instruction.past {
    transform: translateY(-20px); -webkit-transform: translateY(-20px);
}
#int2-instructions .instruction.prep {
    transform: translateY(60px); -webkit-transform: translateY(60px);
}
#int2-instructions .instruction.hold {
    transform: translateY(-5px) scale(.85); -webkit-transform: translateY(-5px)  scale(.85);
    opacity:.6;
}

.answers {
    width:800px;
    position: relative;
    margin:0 auto;
    font-weight:bold;
    min-height:32px;
    text-align: center;
}

.button-area {
    min-height:50px;
    margin:48px auto 36px;
    text-align: center;
    position: relative;
    z-index: 100;
}
.continue {
    margin-bottom:18px;
    transition:opacity .6s; -webkit-transition:opacity .6s;
}
.continue.hidden  {
    opacity: 0;
}
.button {
    background: #585e72;
    border-radius: 5px;
    display: inline-block;
    padding:8px 20px;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, .3);
    margin-right:15px;
    font-weight:bold;
    font-size:1em;
    transition:all .3s; -webkit-transition:all .3s;
    border: 2px solid #676F89;
}
.button:last-child {margin-right:0;}

.button:hover {
    cursor:pointer;
    background:#6576a5;
    border-color:#6576a5;
}
.button.clicked {
    background: #272B37;
    border-color:#42485C;
    cursor:auto;
}
.button.prep {
    opacity: 0;
}

@keyframes upDown {
    0% { transform: translate3d(0, 0, 0); -webkit-transform: translate3d(0, 0, 0); }
    30%{ transform: translate3d(0, 0, 0); -webkit-transform: translate3d(0, 0, 0); }
    50% { transform: translate3d(0, -80%, 0); -webkit-transform: translate3d(0, -80%, 0); }
    70% { transform: translate3d(0, 0, 0); -webkit-transform: translate3d(0, 0, 0); }
    100% { transform: translate3d(0, 0, 0); -webkit-transform: translate3d(0, 0, 0); }
}
@-webkit-keyframes upDown {
    0% { transform: translate3d(0, 0, 0); -webkit-transform: translate3d(0, 0, 0); }
    30%{ transform: translate3d(0, 0, 0); -webkit-transform: translate3d(0, 0, 0); }
    50% { transform: translate3d(0, -80%, 0); -webkit-transform: translate3d(0, -80%, 0); }
    70% { transform: translate3d(0, 0, 0); -webkit-transform: translate3d(0, 0, 0); }
    100% { transform: translate3d(0, 0, 0); -webkit-transform: translate3d(0, 0, 0); }
}

@keyframes leftRightOneDoor {
    0% {  transform: translate3d(0, 0, 0); -webkit-transform: translate3d(0, 0, 0); }
    30% {  transform: translate3d(0, 0, 0); -webkit-transform: translate3d(0, 0, 0); }
    70% {  transform: translate3d(-260%, 0, 0); -webkit-transform: translate3d(-260%, 0, 0); }
    100% { transform: translate3d(-260%, 0, 0); -webkit-transform: translate3d(-260%, 0, 0); }
}
@-webkit-keyframes leftRightOneDoor {
     0% {  transform: translate3d(0, 0, 0); -webkit-transform: translate3d(0, 0, 0); }
    30% {  transform: translate3d(0, 0, 0); -webkit-transform: translate3d(0, 0, 0); }
    70% {  transform: translate3d(-260%, 0, 0); -webkit-transform: translate3d(-260%, 0, 0); }
    100% { transform: translate3d(-260%, 0, 0); -webkit-transform: translate3d(-260%, 0, 0); }
}

@keyframes leftRightTwoDoors {
    0% { transform: translate3d(0, 0, 0);  }
    30% { transform: translate3d(0, 0, 0); }
    70% { transform: translate3d(-536%, 0, 0);  }
    100% {transform: translate3d(-536%, 0, 0);  }
}
@-webkit-keyframes leftRightTwoDoors {
    0% { -webkit-transform: translate3d(0, 0, 0); }
    30% {  -webkit-transform: translate3d(0, 0, 0); }
    70% {  -webkit-transform: translate3d(-536%, 0, 0); }
    100% { -webkit-transform: translate3d(-536%, 0, 0); }
}

@keyframes textDisappear {
    0% { opacity:1; }
    30% { opacity: 1; }
    50% { opacity:0; }
    100% { opacity: 0; }
}
@-webkit-keyframes textDisappear {
    0% { opacity:1; }
    30% { opacity: 1; }
    50% { opacity:0; }
    100% { opacity: 0; }
}

@keyframes scaleDisappear{
    0% { transform: scale(1); -webkit-transform: scale(1);}
    30% {transform: scale(1); -webkit-transform: scale(1);}
    70% { transform: scale(.2); -webkit-transform: scale(.2);}
    100% { transform: scale(.2);-webkit-transform: scale(.2); }
}
@-webkit-keyframes scaleDisappear{
    0% { transform: scale(1); -webkit-transform: scale(1);}
    30% {transform: scale(1); -webkit-transform: scale(1);}
    70% { transform: scale(.2); -webkit-transform: scale(.2);}
    100% { transform: scale(.2);-webkit-transform: scale(.2); }
}

@keyframes doorOpenClose {
    0% { transform: rotateY(0deg); -ms-transform: rotateY(0deg);   }
    30% { transform: rotateY(0deg); -ms-transform: rotateY(0deg);   }
    70% { transform: rotateY(100deg); -ms-transform: rotateY(100deg); }
    100% { transform: rotateY(100deg); -ms-transform: rotateY(100deg); }
}
@-webkit-keyframes doorOpenClose {
    0% { -webkit-transform: rotateY(0deg); }
    30% { -webkit-transform: rotateY(0deg); }
    70% { -webkit-transform: rotateY(100deg); }
    100% { -webkit-transform: rotateY(100deg); }
}

@keyframes dotGrow {
    0% { transform: scale(1);}
    60% { transform: scale(1); }
    70% {  transform: scale(1.3); }
    80% {  transform: scale(1.2);  }
    100% { transform: scale(1.2);  }
}
@-webkit-keyframes dotGrow {
     0% { -webkit-transform: scale(1);}
    60% { -webkit-transform: scale(1);}
    70% { -webkit-transform: scale(1.3);}
    80% { -webkit-transform: scale(1.2); }
    100% { -webkit-transform: scale(1.2); }
}

@keyframes dotGrowLarger {
    0% { transform: scale(1); }
    60% { transform: scale(1); }
    70% { transform: scale(1.5); }
    80% { transform: scale(1.4); }
    100% { transform: scale(1.4); }
}
@-webkit-keyframes dotGrowLarger {
   0% { -webkit-transform: scale(1); }
    60% { -webkit-transform: scale(1); }
    70% { -webkit-transform: scale(1.5); }
    80% { -webkit-transform: scale(1.4); }
    100% { -webkit-transform: scale(1.4); }
}

@keyframes numFirst {
    0% { opacity:1; }
    60% { opacity:1; }
    80% { opacity:0; }
    100% { opacity:0; }
}
@-webkit-keyframes numFirst {
    0% { opacity:1; }
    60% { opacity:1; }
    80% { opacity:0; }
    100% { opacity:0; }
}

@keyframes numSecond {
    0% { opacity:0; }
    60% { opacity:0; }
    80% { opacity:1; }
    100% { opacity:1; }
}
@-webkit-keyframes numSecond {
    0% { opacity:0; }
    60% { opacity:0; }
    80% { opacity:1; }
    100% { opacity:1; }
}

#int2-instructions {
    min-height: 80px;
}
.winwrap {
    width:56px;
    height:62px;
    position:absolute;
    left:122px;
    top:226px;
}
.winwrap p {
    text-transform: uppercase;
    font-weight: bold;
    font-size: 22px;
    width:56px;
    position: absolute;
    left:0;
    top:30px;
    margin-left: 0;
    opacity:1;
    transition: .4s all; -webkit-transition: .4s all;
}
.winwrap.prep p {
    top:55px;
    opacity:0;
}
.win {
    color: #9fcc52;
}
.lose {
    color:#ee4639;
}
.winwrap img {
    transition: all .2s; -webkit-transition: all .2s;
    position: absolute;
    top:0;
    display:block;
    opacity: 1;
}
.winwrap.prep img {
    top:25px;
    opacity: 0;
}
.x-icon {
    width:28px;
    left:14px;
}
.check-icon {
    width:36px;
    left:10px;
}

#doorChoiceRow, #int2-instructions .doorwrap {
    height:350px;
}
#int2-step2-doors {
    display:none;
}
#button-instructions {
    height:65px;
    position: relative;
    margin:20px auto 0;
}
#button-instructions .instruction {
    font-weight:normal;
    font-size:1em;
    line-height: 1.5em;
}
#int2-buttons {
    margin-top:24px;
}
.instruction.yellow {
    color:#F6D530;
}

.three-col {
    float:left;
    width:31%;
    margin-right:3%;
}
.three-col:last-child {
    margin-right:0;
}
.row-container {
    max-width:1200px;
    margin:0 auto;
}
.row-pad {
    padding:0 40px;
}
.player-types h3 {
    margin: 0;
}
.player-types p {
    margin-bottom:0;
}
.player-types {
    margin-bottom:36px;
    text-align: center;
}
.win-rate {
    font-weight: bold;
    color:#79B213;
}


/* interactive 3, simulator */
#int3-instructions {
    min-height:40px;
}
.p1-red {
    color:#fc5a49;
}
.p2-yellow {
    color: #f2e436;
}
.p3-blue {
    color: #69cbe7;
}
.small-button {
    font-size: 1.11111em;
    padding:4px 16px;
}
#int3-buttons {
    margin-top:0;
}
.select {
    position:absolute;
    overflow:hidden;
    margin:0;
    padding:0;
    z-index:100;
    transition:all .2s; -webkit-transition:all .2s;
}
.p1-select {
    width:196px;
    height:316px;
    left:-8px;
    top:-8px;
}
.p2-select {
    width:214px;
    height:334px;
    left:-17px;
    top:-17px;
}
.p3-select {
    width:230px;
    height:350px;
    left:-25px;
    top:-25px;
}
#interactive3 {
    margin-bottom: 0;
}
#interactive3 .door-outer {
    margin-right:48px;
}
#interactive3 .door-outer:last-child {
    margin-right: 0;
}
#interactive3 .doorwrap {
    width:650px;
}
.large-prize {
    display: block;
    position: absolute;
    z-index: 1;
    width: 142px;
    left: 22px;
    top: 101px;
}
#score-wrap {
    width: 500px;
    margin:0 auto;
}
.score-card {
    width:160px;
    background: #eaeaea;
    border-radius: 5px;
    color: #383d4c;
    box-shadow: 1px 1px 4px rgba(0, 0, 0, .5);
    text-align: center;
    overflow: hidden;
    float:left;
    margin-right:10px;
    margin-bottom:32px;
}
.score-card:last-child {
    margin-right:0;
}
.wins {
    transition:all .3s; -webkit-transition:all .3s;
}
.addPoint {
    background: #B2F236;
}
.score-card h3 {
    font-size:1.33333em;
    margin:0;
    padding:15px 0;
    border-bottom:2px solid #383d4c;
}
#player1-score h3 {
    background: #FF6959;
}
#player2-score h3 {
    background: #f2e436;
}
#player3-score h3 {
    background: #69cbe7;
}
.score-card h4 {
    text-transform: uppercase;
    font-weight: normal;
    font-size: 0.833333em;
    line-height:1.2em;
    margin:10px 0 0 0;
}
.score-card p {
    font-size:1.33333em;
    margin:0 0 10px 0;
}
.cell-half {
    float:left;
    width:79px;
    border-right:2px solid  #383d4c;
}
.cell-half:last-child {
    border-right:none;
}
.cell-full {
    border-top:2px solid #383d4c;
}

.faster .door {
    transition:all .1s !important; -webkit-transition:all .1s !important;
}

.faster .select {
    transition:all .1s !important; -webkit-transition:all .1s !important;
}
#sim-intro {
    transition:all .3s; -webkit-transition:all .3s;
    margin-bottom: 0;
}
#sim-intro.hidden {
    opacity: 0;
}
#int3-2-buttons {
    display:none;
}
.button-label {
    display:inline-block;
    margin-right:6px;
}
@media only screen and (max-width: 1060px) {
    .door-options {
        width: 862px;
    }
    .small-doors {
        width:278px;
        height:278px;
        margin-right:8px;
    }
    .small-doorwrap {
        width:278px;
        top:78px;
    }
}

@media only screen and (max-width: 1000px) {
    .probabilityWrap {
        width: auto;
        margin: 0 32px 32px;
    }
    .probabilityWrap .figure {
        float:none;
        width:auto;
        margin:0;
        padding:25px 0;
    }
    .figure-wrap {
        margin:0 auto;
    }
}

@media only screen and (max-device-width: 600px) {
    h1, h2, h3, h4, p, .txt-column {
      max-width: none;
      padding: 0 20px;
    }
    .no-mobile {
        display: none;
    }
    h1 {
        font-size:1.4em;
        line-height: 1.25em;
    }

    body {font-size:36px !important; line-height:1.75  !important;}
    p.lede  {font-size:40px !important; line-height:1.5  !important;}
    p.byline {
      font-size: 30px !important;
    }


    #head-label {
      font-size: 26px; line-height: 1.1;
    }
    a.name {
      font-size: 30px; line-height: 1.1;
    }
    h2 {
      font-size: 40px;
      line-height:1.6;
    }
    h3 {
      font-size: 38px;
      line-height:1.7;
    }

    .probabilityWrap .figure {
      padding: 50px 0;
    }
    #int1-instructions {
        height:100px;
        transition: height .2s; -webkit-transition: height .2s;
    }
    /* triggered with javascript for longer instrucitons in step 2 */
    #int1-instructions.mobile-height {
        height:315px;
    }
    .interactive-wrap p {
        line-height: 1.3;
    }
    .button {
        margin-bottom:25px;
        margin-right:10px;
        font-size:.88889em;
        padding: 12px 28px;
    }
    .button:last-child {
        margin-right:0;
    }
    .doorwrap {
        width:650px;
    }
    .probabilityWrap {
        margin: 0 0 64px;
    }
    .figure-wrap {
        width: auto;
        padding:0 45px;
    }
    .intstruction-area, .answers {
        width: auto;
        margin: 0 45px;
    }
    .answers {
        min-height:64px;
    }
    p.instruction, .answers p {
        width:100%;
        font-size:.888889em;
        line-height: 1.3
    }
    p.interactive-intro {
        margin-bottom:.5em;
    }

    .interactive {
        padding-bottom:80px;
    }

    /* use larger door sizing for med-doors on mobile. */
    .med-select {
        width:180px;
        height:300px;
    }
    .med-doors  {
        width:590px;
        margin:0 auto;
    }
    .med-doors .door-outer {
        width:180px;
        height:300px;
        margin-right:10px;
    }
    .med-doors .door-outer:last-child {
        margin-right: 0;
    }
    .med-doors .door-frame {
        width:180px;
        height:300px;
    }
    .med-doors .door-inside {
        width:150px;
        height: 285px;
        left:15px;
    }
    .med-doors .door-inside:after {
        width:200px;
        height:100px;
        top:-38px;
    }
    .med-doors .door {
        width:150px;
        height: 285px;
        left:15px;
    }
    .med-doors .door:after {
        width:16px;
        height:16px;
        left:16px;
        top:135px;
    }
    .probability-dots {
        width:590px;
        height:69.23px;
        margin: 0 auto;
    }
    .dot-upDown, .dot-leftRight, .dot {
        width:80px;
        height:80px;
    }
    .dot-inner {
        width:80px;
        height:80px;
        border-radius: 100px;
    }
    .dot p {
        font-size:24px;
        width:80px;
    }
    .numerator {
        width:80px;
    }
    .bar {
        width:40px;
        left:20px;
        top:28px;
    }
    .denominator {
        width:80px;
        top:32px;
    }

    #int2-instructions {
        height:200px;
    }
    #int2-instructions  #int2-step3 {
        top:120px;
    }
    #int2-instructions  #int2-step3.prep {
        top:160px;
    }
    #int2-instructions  #int2-step3.past {
        top:80px;
    }
    #button-instructions {
        font-size:.8333333em;
        height:270px;
    }
    .winwrap {
        top:212px;
    }
    .row-pad {
        padding: 0 60px;
    }
    .three-col {
        float:none;
        margin-right: 0;
        text-align: left;
        width: auto;
        margin-bottom:1em;
    }
    #int3-instructions {
        height:200px;
    }
    #interactive3 .doorwrap {
        width:670px;
    }
    #score-wrap {
        width: auto;
        margin:0 30px;
    }
    .score-card {
        width:32%;
        margin-right:2%;
    }
    .score-card:last-child {
        margin-right:0;
    }
    .cell-half {
        width:49%;
    }
    #sim-intro {
        font-size: .833333em;
        line-height: 1.3;
        margin-bottom: .5em;
    }
    .score-card h3, .score-card p {
        font-size:1em;
    }
    .score-card h4 {
        font-size:.6em;
    }
    .button-label {
        font-size: .833333em;
    }
    #int3-buttons {
        margin:60px auto;
    }
    #int1-answers {
        height:2.75em;
    }


}
.row:before, .row:after{
    display: table;
    content: " ";
}
.row:after {
  clear: both;
}